<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.bar {
			width: 300px;
			height: 30px;
			line-height: 30px;
			margin-top: 15px;
			text-align: center;
			border: darkseagreen;
			border-style: solid;
		}
		
		#div1 {
			width: 50%;
			height: 100%;
			position: relative;
			background-color: #0000FF;
			float: left;
		}
		
		#div2 {
			width: 80%;
			height: 100%;
			position: relative;
			background-color: #0000FF;
			float: left;
		}
		
		#div3 {
			width: 33%;
			height: 100%;
			position: relative;
			background-color: green;
			float: left;
		}
		
		.bar div span {
			position: absolute;
			width: 300px;
			text-align: center;
			
		}
	</style>

	<body>

		<div>百分比进度条样式</div>
		<div class="bar">
			<div id="div1">
			</div>
			<span>50%</span>
		</div>
		<div class="bar">

			<div id="div2">
			</div><span>80%</span>
		</div>
		<div class="bar">
			<div id="div3">
			</div><span>33%</span>
		</div>

	</body>

</html>
